<template>
	<view class="container">
		<!--     <view
      v-if="
        tabMenus == null ||
        tabMenus.length == 0 ||
      "
    >
      <u-empty text="分组或出品部门为空，请添加后再试~"></u-empty>
    </view> -->
		<view class="details" style="padding: 20rpx 30rpx; padding-bottom: 90px">
			<uni-forms ref="form" v-if="details !== null">
				<uni-forms-item class="form-item" label="菜单分类名称:" name="name">
					<view class="lbl">菜单分类名称:</view>
					<uni-easyinput :disabled="disabled" class="form-item-right" type="text" placeholder="请填写菜单分类名称" v-model="details.name" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="上级分类" name="parentId">
					<view class="lbl">上级分类:</view>
					<picker
						:disabled="disabled"
						class="form-item-right"
						style="flex: 1"
						@change="bindPicker1Change"
						v-model="details.parentId"
						:range="FoodCategoryList"
						:range-key="'name'"
					>
						<view class="uni-input">{{ FoodCategoryList.find((item) => item.id == details.parentId).name }}</view>
					</picker>
				</uni-forms-item>
				<uni-forms-item class="form-item" label="手机点餐端展示" name="currencyFlag">
					<view class="lbl">手机点餐端展示:</view>
					<!-- <radio-group
            :disabled="disabled"
            class="form-item-right"
            name="appletShow"
          >
            <label style="margin-right: 30rpx">
              <radio
                :disabled="disabled"
                :value="1"
                :checked="details.appletShow == 1"
              />
              <text>是</text>
            </label>
            <label>
              <radio
                :disabled="disabled"
                :value="0"
                :checked="details.appletShow !== 1"
              />
              <text>否</text>
            </label>
          </radio-group> -->
					<u-radio-group v-model="details.appletShow">
						<u-radio size="20" activeColor="#edac2f" :customStyle="{ marginTop: '12rpx' }" label="是" :name="1"></u-radio>
						<u-radio size="20" activeColor="#edac2f" :customStyle="{ marginLeft: '8px', marginTop: '12rpx' }" label="否" :name="0"></u-radio>
					</u-radio-group>
				</uni-forms-item>

				<!-- 菜单分类别名 -->
				<uni-forms-item class="form-item" label="菜单分类别名" name="byName">
					<view class="lbl">菜单分类别名:</view>
					<uni-easyinput :disabled="disabled" class="form-item-right" type="text" v-model="details.byName" placeholder="请填写菜单分类别名" />
				</uni-forms-item>

				<!-- 分类助记码 -->
				<uni-forms-item class="form-item" label="分类助记码" name="helpCode">
					<view class="lbl">分类助记码:</view>
					<uni-easyinput :disabled="disabled" class="form-item-right" type="text" v-model="details.helpCode" placeholder="请填写分类助记码" />
				</uni-forms-item>
				<!-- 出品部门 -->
				<uni-forms-item class="form-item" label="出品部门" name="departId">
					<view class="lbl">出品部门：</view>
					<picker
						:disabled="disabled"
						class="form-item-right"
						style="flex: 1"
						@change="bindPickerDepartChange"
						v-model="details.departId"
						:range="departmentList"
						:range-key="'name'"
					>
						<view class="uni-input">
							{{ departmentList.find((item) => item.id == details.departId) == null ? '无' : departmentList.find((item) => item.id == details.departId).name }}
						</view>
					</picker>
				</uni-forms-item>
				<uni-forms-item class="form-item" label="排序" name="sort">
					<view class="lbl">排序:</view>
					<uni-number-box v-model="details.sort" :min="0" :max="99999"></uni-number-box>
				</uni-forms-item>
			</uni-forms>
		</view>
		<li-bottom-btns mode="add" @btnEditOrSaveSubmitClick="btnAddClick" />
	</view>
</template>
<script>
import { ref, reactive, onMounted, toRefs, getCurrentInstance } from '@vue/composition-api';
import { corpId, storeId } from '../../../constants/apiConstants';
import { uHideLoading, uShowLoading, utoast } from '../../../utils/uniUtils';
import { isIntegerOrNumericStringOrEmpty } from '../../../utils/stringUtils.js';

export default {
	name: 'addFoodFeedCategory',
	setup(props) {
		// 生命周期
		onMounted(async () => {
			try {
				uShowLoading();
				// await GetFoodFeedCategory();
				await GetDepartment();
				await GetFoodCategory();
				data.isLoaded = !false;
			} catch (error) {
				console.log('error-->', error);
				uHideLoading();
				data.isLoaded = false;
			}
		});

		const { proxy } = getCurrentInstance(); //  proxy 代表this

		// 数据定义
		const data = reactive({
			isLoaded: false,
			FoodCategoryList: [
				{
					id: 0,
					corpId: corpId,
					storeId: storeId,
					parentId: 0,
					name: '无上级分类',
					byName: '',
					appletShow: 1,
					helpCode: '',
					departId: 0,
					upIcon: '',
					icon: '',
					isDelete: false
				}
			], // 菜品分类列表
			tabMenus: [],
			departmentList: [], // 部门列表
			currentCateIdx: 0, //左边默认分类
			details: {
				corpId: corpId,
				storeId: storeId,
				parentId: 0,
				name: '',
				byName: '',
				appletShow: 1,
				helpCode: '',
				departId: 0,
				upIcon: '',
				sort: 0,
				icon: '',
				isDelete: false
				// createTime: "2023-11-08 19:21:08",
				// modifyTime: 752757668,
			}, //   加料详情
			disabled: false, // 禁用
			lock: false // 节流锁
		});

		/**
		 * 获取加料分类
		 */
		const GetFoodFeedCategory = async () => {
			console.log('获取加料分类~~');
			let {
				data: { list }
			} = await proxy.$api.GetFoodFeedCategory({
				pageNum: 1,
				pageSize: 9999
			});
			console.log('list-->', list);
			data.tabMenus = list;
			data.details.feedTypeId = data.tabMenus[0].id;
		};

		const bindPicker1Change = (e) => {
			// console.log("e-->", e);
			data.details.parentId = data.FoodCategoryList[e.detail.value].id;
		};

		const bindPickerwarrantyTypeChange = (e) => {
			// console.log("e-->", e);
			data.details.warrantyType = data.warrantyTypeEnum[e.detail.value].value;
		};

		const bindPickerstatusChange = (e) => {
			// console.log("e-->", e);
			data.details.status = data.statusEnum[e.detail.value].value;
		};

		const bindPicker2Change = (e) => {
			// console.log("e-->", e);
			data.details.addPriceWay = data.addPriceWayList[e.detail.value].id;
		};

		/**
		 *  上tab栏 点击事件
		 */
		const onTabClick = async (e) => {
			await GetFoodFeed(e.index);
			data.currentCateIdx = 0;
			data.disabled = true;
		};

		/**
		 * 做法分组选择事件
		 */
		const feedCataChange = (e) => {
			console.log(e);
		};

		/**
		 * 添加按钮点击事件
		 */
		const btnAddClick = async () => {
			data.details.name = data.details.name.trim();
			data.details.byName = data.details.byName.trim();
			data.details.helpCode = data.details.helpCode.trim();
			console.log('提交表单', data.details);
			if (data.details.name.length == 0) {
				utoast('名称为空！！', 'error');
				return;
			}

			// if (data.details.byName.length == 0) {
			//   utoast('分类别名为空！', 'error');
			//   return;
			// }

			// if (data.details.helpCode.length == 0) {
			//   utoast('助记码为空！', 'error');
			//   return;
			// }

			if (data.details.sort == null) {
				data.details.sort == 0;
			}

			if (!isIntegerOrNumericStringOrEmpty(data.details.sort)) {
				utoast('排序必须为数字', 'error');
				return;
			}

			if (data.lock == true) {
				return;
			}

			data.lock = true;
			const res = await proxy.$api.AddFoodCategory(data.details);
			if (res?.code == 0) {
				utoast('操作成功');
				setTimeout(() => {
					uni.hideToast();
					uni.navigateTo({
						url: '/pages/workbench/foodcategory/list'
					});
					data.lock = false;
				}, 2000);
			} else {
				setTimeout(() => {
					data.lock = false;
					console.log('fail', data.lock);
				}, 2000);
			}
		};

		/**
		 * 获取部门列表
		 */
		const GetDepartment = async () => {
			let {
				data: { list }
			} = await proxy.$api.GetDepartment({
				pageNum: 1,
				pageSize: 9999
			});
			console.log('部门列表-->', list);
			data.departmentList = [...list];
			data.details.departId = data.departmentList[0].id;
		};

		/**
		 * 获取菜品分类列表
		 */
		async function GetFoodCategory() {
			let {
				data: { list }
			} = await proxy.$api.GetFoodCategory({
				pageNum: 1,
				pageSize: 9999
			});
			console.log('GetFoodCategory-->', list);
			data.FoodCategoryList = [...data.FoodCategoryList, ...list];
		}

		const bindPickerDepartChange = (e) => {
			data.details.departId = data.departmentList[e.detail.value].id;
			// console.log(e, "e", data.details);
		};

		return {
			...toRefs(data),
			bindPicker1Change,
			bindPickerstatusChange,
			bindPickerwarrantyTypeChange,
			btnAddClick,
			bindPickerDepartChange
		};
	}
};
</script>
<style lang="scss" scoped>
@import '~@/pages/workbench/food/list.scss';

.container {
	.details {
		background-color: #fff;

		.form-item {
			display: flex;
			align-items: center;
			padding: 14rpx 0;

			.lbl {
				width: 110px;
				font-size: 14px;
			}

			.form-item-right {
				flex: 1;
			}
		}
	}

	.btn-group {
		display: flex;
		justify-content: space-around;
		padding-top: 22rpx;
	}

	picker {
		flex: 1;
		border: 1px solid #cacaca;
		background-color: #fff;
		padding: 7rpx 10rpx;
		border-radius: 5px;
		position: relative;
	}
}
</style>
